<template>
  <div class="wrap">
    <div
      ref="mapContainer"
      class="map-container"
      :style="[{ width: props.width, height: props.height }]"
    ></div>
  </div>
</template>

<script lang="ts" setup>
// imports
import { onMounted, ref } from 'vue'
import { load } from '@amap/amap-jsapi-loader'

interface IMarker {
  lon: number
  lat: number
  title?: string
}

interface Iprops {
  width?: string
  height?: string
  markers?: IMarker[]
  path?: [number, number][]
  center?: [number, number]
}
// props
const props = defineProps<Iprops>()
// const props = defineProps<Iprops>({
//   width: {
//     type: String,
//     default: '100%',
//   },
//   height: {
//     type: String,
//     default: 'calc(100vh - 100px)',
//   },
//   markers: {
//     type: Array,
//     default: () => [],
//   },
//   path: {
//     type: Array,
//     default: () => [],
//   },
//   center: {
//     type: Array,
//     default: () => [108.949, 34.341],
//   },
// })

// emits

// refs
const mapContainer = ref<HTMLDivElement | null>(null)
let map = ref<any>(null)

// computed

// methods
const initMap = async () => {
  await load({
    key: '4b47c3b15b2c298a9d9e174be21d7ee7', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap: any) => {
      map.value = new AMap.Map(mapContainer.value, {
        center: props.center,
        zoom: 13,
      })

      // 添加标记
      if (props.markers) {
        addMarkers(AMap)
      }

      // 添加轨迹
      if (props.path && props.path.length > 0) {
        addPath(AMap)
      }

      map.value.setFitView()
    })
    .catch((e: any) => {
      console.log(e)
    })
}

// 添加marker海量点标记
const addMarkers = (AMap: any) => {
  let stationMarkers: IMarker[] = []
  props.markers?.forEach((item) => {
    let marker = new AMap.Marker({
      map: map.value,
      position: [item.lon, item.lat],
      offset: new AMap.Pixel(-16, 0),
      icon: '',
      data: item,
    })
    // 点击点标记展示信息窗体
    marker.on('click', (e: any) => {
      showBusInfoWindow({ ...item, ...e }, AMap)
    })
    stationMarkers.push(marker)
  })
  map.value.add(stationMarkers)
}

// 展示信息窗体
const showBusInfoWindow = (e: any, AMap: any) => {
  let infoWindow = new AMap.InfoWindow({
    isCustom: true, //使用自定义窗体
    content: `<div class="info-window">
      <div class="closeBtn" onclick="closeClick">关闭</div>
      <div class="content">
         <div class="item">地点：${e.title}</div>
        <div class="item">时间：${e.time}</div>
        <div class="item">数量：${e.number}</div>
      </div>
    </div>`,
    anchor: 'bottom-center',
    offset: new AMap.Pixel(16, -25),
  })
  infoWindow.open(map.value, [e.lnglat.lng, e.lnglat.lat])
  // 添加关闭按钮的点击事件
  const closeButton: any = document.querySelector('.closeBtn')
  if (closeButton) {
    closeButton.onclick = () => {
      infoWindow.close()
    }
  }
}

// 绘制轨迹
const addPath = (AMap: any) => {
  const polyline = new AMap.Polyline({
    path: props.path,
    strokeColor: '#F00',
    strokeWeight: 6,
    strokeOpacity: 0.8,
    lineJoin: 'round',
  })
  polyline.setMap(map.value)
}

// 获取到dom后在创建地图
onMounted(async () => {
  initMap()
})
</script>

<style lang="scss" scoped>
:deep(.info-window) {
  background-color: #fff;
  min-width: 200px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  .closeBtn {
    color: #3478c6;
    text-align: right;
    padding: 10px 20px 0 0;
    cursor: pointer;
  }

  .content {
    padding: 20px;
    color: #000;
    font-size: 16px;

    .item {
      margin-bottom: 10px;
    }
  }
}
</style>
